<template>
  <div id="member-log-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-43-this.getSafeArea().top)+'px',
  }">
    <div class="page-title page-title-white" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.push('/MemberHome')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span v-text="currType.name+'日志'"></span>
    </div>

    <div class="search-box my-bg1" style="position: relative" :style="{top:'18px'}">
      <div class="act-type-box" v-if="form.actType" :class="{'only-one':!form.createdAt}">
         <span>
            {{ getActTypeName(form.actType) }}
           <i class="el-icon-remove" @click="setFormActType('')"></i>
         </span>
      </div>
      <div class="datetime-box" v-if="form.createdAt">
        <span>
          {{ form.createdAt }}
          <i class="el-icon-remove" @click="setFormCreateAt('')"></i>
        </span>
      </div>
      <div class="choose-button">
        <el-button type="primary" @click="openSearchDialog">筛选</el-button>
      </div>
    </div>

    <div class="curr-box" style="position: relative" :style="{top:'18px'}">
      <div class="content">
        <div class="curr-value" v-text="ToMoney(currValue)"></div>
        <div class="tip-info">最新{{ currType.name }}</div>
      </div>
    </div>


    <i-scroller-box class="log-list" ref="i-scroller-box"
                    :url="currUrl"
                    style="position: relative; margin-top: 2px"
                    :height="getWinSize().height-(148)"
                    :style="{width:'100%',top:'18px'}">
      <template v-slot:list-item="{index,data}">
        <div class="item" :key="index" @click="getDetail(data.id)">
          <div class="left">
            <div class="act-name">
              <span v-text="data.actType.name"></span>
              <el-tag type="warning" @click="$router.push('/OrderDetail?id='+data.params)" v-if="currType.key==='moneyLog' && ['SubmitOrder','CancelOrder','PayOrder'].indexOf(data.actType.id)>-1">详情</el-tag>
            </div>
            <div class="datetime" v-text="data.createdAt"></div>
          </div>
          <div class="right">
            <div class="number">
              <span v-text="getChange(data)" :class="getChangeClass(data)"></span>
            </div>
            <div class="currNumber" v-text="getCurr(data)"></div>
          </div>
          <div class="icon" v-if="currType.key==='commissionLog'">
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </template>
    </i-scroller-box>


  </div>
</template>

<script>
import IScrollerBox from '../common/IScrollerBox'

export default {
  name: 'MemberLog',
  components: {IScrollerBox},
  data: function () {
    return {
      currValue:0,
      logList: [],
      // 操作类型
      actTypeArr: [
      ],
      actTypeArrMap:{
        moneyLog:this.mapToArray(dict.MoneyActTypeMap),
        scoreLog:this.mapToArray(dict.ScoreActTypeMap),
        commissionLog:this.mapToArray(dict.CommissionActTypeMap),
      },
      // 搜索表单
      form: {
        actType: '',
        createdAt: ''
      },

      // 页面类型
      currType: {
        name: '',
        key: '',
      },
      // 页面类型数组
      typeArr: [
        {key: 'moneyLog', name: '余额'},
        {key: 'scoreLog', name: '积分'},
        {key: 'commissionLog', name: '佣金'},
      ],
      urlMap: {
        'moneyLog': 'Member/getMoneyLogList',
        'scoreLog': 'Member/getScoreLogList',
        'commissionLog': 'Member/getCommissionLogList',
      },
      currUrl:''
    }
  },
  mounted () {
    if (this.$route.query && this.$route.query.type) {
      this.setCurrType(this.$route.query.type)
    } else {
      this.setCurrType('moneyLog')
    }
    let $this=this
    $this.actTypeArr=$this.actTypeArrMap[$this.currType.key]
    console.log('$this.actTypeArr',$this.actTypeArr)
    setTimeout(function () {
      $this.getUserInfo($this.getList)
    },600)

  },
  methods: {
    // 如果有登录状态,则获取会员信息
    getUserInfo:function (callback) {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/info', {}, function (data) {
        if ($this.currType.key==='commissionLog'){
          $this.currValue=data.commission
        }
        if ($this.currType.key==='moneyLog'){
          $this.currValue=data.money
        }
        if ($this.currType.key==='scoreLog'){
          $this.currValue=data.score
        }
        console.log('$this.currType',$this.currType)
        callback()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
    getDetail:function (id) {
      if (this.currType.key==='commissionLog'){
        this.bus.$emit('CommissionDetailDialogCallBus', id)
      }
    },
    // 打开筛选弹窗
    openSearchDialog: function (id) {
      this.bus.$emit('ChooseLogFormDialogCallBus', this.search, this.form.actType, this.form.createdAt, this.actTypeArr)
    },
    // 搜索回调
    search: function (actType, createdAt) {
      this.form.actType = actType
      this.form.createdAt = createdAt
      this.getList()
    },
    // 请求搜索结果
    getList: function () {
      var $this = this
      var actType = $this.form.actType
      var createdAt = $this.form.createdAt
      var form = {actType, createdAt}
      form.sortProp = 'id'
      form.sortOrder = 'DESC'
      console.log('form',form)
      this.$refs['i-scroller-box'].getList({
        form: form
      })
    },
    // 设置搜索-查询时间段
    setFormCreateAt: function (createdAt) {
      this.form.createdAt = createdAt
      this.getList()
    },
    // 设置搜索-操作类型
    setFormActType: function (actType) {
      this.form.actType = actType
      this.getList()
    },
    // 获取操作类型名称
    getActTypeName: function (actType) {
      var name = ''
      let $this = this
      $this.actTypeArr.forEach(function (value, index) {
        if (value.id === actType) {
          name = value.name
        }
      })
      return name
    },
    // 处理变化金额
    getChange: function (item) {
      var tmpKey = this.currType.key.replace('Log', '')
      var fuhao = ''
      if (item[tmpKey] > 0) {
        fuhao = '+'
      } else if (item[tmpKey] < 0) {
        fuhao = ''
      }
      return fuhao + this.ToMoney(item[tmpKey])
    },
    // 获取当前的(变化前金额)
    getCurr: function (item) {
      var tmpKey = this.currType.key.replace('Log', '')
      var tmpKey = 'before' + tmpKey[0].toUpperCase() + tmpKey.substring(1)
      return this.ToMoney(item[tmpKey])
    },
    // 获取变化标记类
    getChangeClass: function (item) {
      var tmpKey = this.currType.key.replace('Log', '')
      var className = ''
      if (item[tmpKey] > 0) {
        className = 'change-add'
      } else if (item[tmpKey] < 0) {
        className = 'change-sub'
      }
      return className
    },
    // 设置当前类别
    setCurrType: function (type) {
      var currType = {}
      let $this = this
      $this.typeArr.forEach(function (value, index) {
        if (value.key === type) {
          currType = value
        }
      })
      $this.currType = currType
      $this.currUrl = $this.urlMap[$this.currType.key]
    }
  }
}
</script>

<style scoped>

</style>
